<template>
    <div>
        <page-main>
            <el-row>
                <el-col :md="16" :sm="24">
                    <h2>{{ status }}：{{ tabelData.name }}</h2>
                    <div class="video-box">
                        <div class="video-player">
                            <vue-aliplayer-v2
                                v-if="[1].includes(tabelData.room_status)"
                                ref="VueAliplayerV2"
                                class="my-aliplayer"
                                :source="source"
                                :options="options"
                            />
                            <!-- 直播结束缺省 -->
                            <!-- <div v-if="tabelData.room_status === 0 || 2" class="liveEnd">
                                <svg t="1641555098426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10618" width="200" height="200"><path d="M753.265 105.505c12.57 12.547 12.696 32.812 0.377 45.513l-0.377 0.382-72.738 72.6H816c70.692 0 128 57.308 128 128v448c0 70.692-57.308 128-128 128H208c-70.692 0-128-57.308-128-128V352c0-70.692 57.308-128 128-128h135.685l-72.737-72.6c-12.698-12.673-12.698-33.221 0-45.895 12.697-12.673 33.284-12.673 45.982 0L435.65 224h152.912l118.72-118.495c12.698-12.673 33.285-12.673 45.983 0zM816 288H208c-34.993 0-63.426 28.084-63.991 62.942L144 352v448c0 34.993 28.084 63.426 62.942 63.991L208 864h608c34.993 0 63.426-28.084 63.991-62.942L880 800V352c0-35.346-28.654-64-64-64zM600 546c19.882 0 36 16.118 36 36s-16.118 36-36 36H424c-19.882 0-36-16.118-36-36s16.118-36 36-36h176z" fill="#333333" p-id="10619"></path></svg>
                            </div> -->
                        </div>
                    </div>
                </el-col>
                <el-col :md="8" :sm="24">
                    <div style="margin: 20px 0 0 10px;">
                        <el-button :disabled="tabelData.room_status === 1" type="success" @click="play()">直播开始</el-button>
                        <el-button :disabled="tabelData.room_status === 2 || 0" type="danger" @click="pause()">直播结束</el-button>
                        <!-- <el-button :disabled="tabelData.room_status === 1" type="success" @click="play()">直播开始</el-button>
                        <el-button :disabled="tabelData.room_status === 2" type="danger" @click="pause()">直播结束</el-button> -->
                    </div>
                    <div style="margin-top: 15px; margin-left: 10px;">
                        <h3>推流地址：</h3>
                        <el-input v-model="tabelData.push_artc" class="NetbarNumber" placeholder="请输入内容">
                            <el-button id="copy_text" ref="copy" slot="append" type="primary" size="mini" class="btn" :data-clipboard-text="tabelData.push_artc" @click="copy">复制</el-button>
                        </el-input>
                        <el-input v-model="tabelData.push_rtmp" class="NetbarNumber" placeholder="请输入内容">
                            <el-button id="copy_text" ref="copy" slot="append" type="primary" size="mini" class="btn" :data-clipboard-text="tabelData.push_rtmp" @click="copy">复制</el-button>
                        </el-input>
                    </div>
                    <div style="margin-top: 30px; margin-left: 10px;">
                        <h3>拉流地址：</h3>
                        <el-input v-model="tabelData.live_artc" class="NetbarNumber" placeholder="请输入内容">
                            <el-button id="copy_text" ref="copy" slot="append" type="primary" size="mini" class="btn" :data-clipboard-text="tabelData.live_artc" @click="copy">复制</el-button>
                        </el-input>
                        <el-input v-model="tabelData.live_m3u8" class="NetbarNumber" placeholder="请输入内容">
                            <el-button id="copy_text" ref="copy" slot="append" type="primary" size="mini" class="btn" :data-clipboard-text="tabelData.live_artc" @click="copy">复制</el-button>
                        </el-input>
                        <el-input v-model="tabelData.live_rtmp" class="NetbarNumber" placeholder="请输入内容">
                            <el-button id="copy_text" ref="copy" slot="append" type="primary" size="mini" class="btn" :data-clipboard-text="tabelData.live_rtmp" @click="copy">复制</el-button>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
        </page-main>

        <page-main>
            <el-row>
                <el-col :md="16" :sm="24">
                    <h3>回放地址：</h3>
                    <el-table ref="table" v-loading="loading" class="list-table" :data="listData" border stripe highlight-current-row>
                        <el-table-column prop="addstr" align="center" label="回放地址" />
                        <el-table-column label="操作" align="center" width="215">
                            <el-button size="mini" plain style="margin-right: 5px;" @click="getCurrentTime">查看回放</el-button>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        :current-page.sync="page.page"
                        :total="page.total"
                        :page-size.sync="page.size"
                        :page-sizes.sync="page.sizes"
                        layout="total, sizes, ->, prev, pager, next, jumper"
                        background
                        @size-change="refresh"
                        @current-change="getDataList"
                    />
                    <!-- <div style="margin-top: 15px;">
                        <template>
                            <el-input v-for=" (item,index) in tabelData.live_recode_list" :key="index" v-model="aa" class="NetbarNumber" placeholder="请输入内容">
                                <el-button id="copy_text" ref="copy" slot="append" type="primary" size="mini" class="btn" :data-clipboard-text="aa" @click="copy">复制</el-button>
                            </el-input>
                        </template>
                    </div> -->
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>
<script>
import mixin from '@/mixins/mixin'
import VueAliplayerV2 from 'vue-aliplayer-v2'
import Clipboard from 'clipboard'
export default {
    components: {
        VueAliplayerV2
    },
    mixins: [mixin],
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            listData: [
                {addstr: '//player.alicdn.com/video/aliyunmedia.mp4'}
            ],
            aa: '33',
            status: '',
            tabelData: [],
            liveInfo: {
                source: '',
                status: 2
            },
            options: {
                // source:'//player.alicdn.com/video/aliyunmedia.mp4',
                isLive: true // 切换为直播流的时候必填
                // format: 'm3u8'  //切换为直播流的时候必填
            },
            source: '',
            // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
            show: true,
            isShowMultiple: false
        }
    },
    mounted() {
        this.getGender()
        // this.id = this.$route.params.id\
    },
    methods: {
        copy: function() {
            this.input = document.querySelector('.NetbarNumber')
            var clipboard = new Clipboard('#copy_text')
            clipboard.on('success', () => {
                this.$message.success('复制成功')
                clipboard.destroy()
            })
        },
        getGender() {
            this.$api.post('/live/live/room', { id: this.$route.params.id }).then(res => {
                this.tabelData = res.data.data
                if (this.tabelData.room_status == 0) {
                    this.status = '预告'
                }
                if (this.tabelData.room_status == 1) {
                    this.status = '直播中'
                    this.source = '//player.alicdn.com/video/aliyunmedia.mp4'
                }
                if (this.tabelData.room_status == 2) {
                    this.status = '已完成'
                }
            })
            console.log(this.tabelData)
        },
        play() {
            this.$api.post('/live/live/change-room-status', { id: this.$route.params.id, room_status: 1}).then(res => {
                if (res.data.data.room_status === 1) {
                    this.status = '直播中'
                    this.source = '//player.alicdn.com/video/aliyunmedia.mp4'
                    this.tabelData.room_status = res.data.data.room_status
                }
            })
            // this.$refs.VueAliplayerV2.play()
        },
        pause() {
            this.$api.post('/live/live/change-room-status', { id: this.$route.params.id, room_status: 2}).then(res => {
                if (res.data.data.room_status === 2) {
                    this.status = '已完成'
                    this.source = '0'
                    this.tabelData.room_status = res.data.data.room_status
                    console.log(this.source)
                }
            })
            // this.$refs.VueAliplayerV2.pause()
            // 1. 确认是否结束直播 confirm
            // 2. 确认后 走接口 结束当前直播
            // 3. 销毁播放器，展示缺省状态
        },

        replay() {
            this.$refs.VueAliplayerV2.replay()
        },

        // 点击查看回放地址
        getCurrentTime() {
            // this.$refs.VueAliplayerV2.getCurrentTime();
            this.source = '//player.alicdn.com/video/aliyunmedia.mp4'
        },

        getStatus() {
            const status = this.$refs.VueAliplayerV2.getStatus()
            console.log('getStatus:', status)
            alert(`getStatus:${status}`)
        },

        showMultiple() {
            this.isShowMultiple = !this.isShowMultiple
        }
    }
}
</script>
<style lang="scss" scoped>
.video-box {
    position: relative;
    padding-bottom: 56.25%;
    background-color: rgb(245, 245, 245);
    border-radius: 10px;
    .video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: rgb(143, 136, 136), $alpha: 0.5);
        border-radius: 10px;
    }
}
.my-aliplayer {
    height: 100% !important;
}
.NetCopy {
    display: block;
    width: 70%;
    height: 30px;
    border: 1px solid black;
    border-radius: 5px;
    margin-right: 5px;
    line-height: 30px;
    overflow: hidden;
}
.NetbarNumber {
    margin-bottom: 15px;
}
.liveEnd {
    text-align: center;
    margin-top: 130px;
}
</style>
